<template>
  <div>
    <el-dialog
      v-model="visable"
      class="exportModalBox"
      :title="title"
      width="40%"
      draggable
      :close-on-click-modal="false"
      style="max-width: 560px;"
    >
      <el-form
        ref="formRef"
        :model="formData"
        label-width="auto"
        :rules="formRules"
        style="width: 80%; margin: auto"
      >
        <el-col :span="24">
          <el-form-item label="字典名称:" prop="dicName">
            <el-input
              v-model="formData.dicName"
              placeholder="字典名称"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="字典值:" prop="dicValue">
            <el-input
              v-model="formData.dicValue"
              placeholder="字典值"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注:" prop="remark">
            <el-input
              type="textarea"
              v-model="formData.remark"
              placeholder="备注/说明"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="字典排序:" prop="dicSort">
            <el-input
              v-model="formData.dicSort"
              placeholder="字典排序"
              clearable
              type="number"
              :min="0"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button size="small" @click="visable=false">取消</el-button>
          <el-button type="primary" size="small" @click="submit" >确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import {
  getDictionaryById,
  addDictionary,
  updateDictionary
} from "@/api/system/dictionary";
let orgFormData = {
        dicId: undefined,
        dicValue: "",
        dicName: "",
        dicSort: 0,
        dicTypeCode: "",
        remark:"",
      }
export default {
  data() {
    return {
      // 弹框标题
      title: "",
      // 弹框开关
      visable: false,
      // 弹框中form数据对象
      formData: {...orgFormData},
      // 弹框中form校验规则
      formRules: {
        dicName: [
          { required: true, trigger: "blur", message: "字典名称不能为空" },
        ],
        dicValue: [
          { required: true, trigger: "blur", message: "字典值不能为空" },
        ],
      },
    };
  },
  methods:{
    openModal(row) {
      this.visable = true
      this.$nextTick(() => {
        this.formData = {...orgFormData}
        this.formData.dicTypeCode = row.dicTypeCode
        console.log('字典重置表单后的数据：',this.formData);
      })
      if(this.isNotBlank(row.dicId)){
        this.title = '数据字典修改'
        getDictionaryById({'dicId':row.dicId}).then((res=>{
          if (res.code==1) {
            this.formData = {...res.data}
          }
        }))
      } else {
        this.title = '数据字典新增'
      }
    },
    submit(){
      this.$refs.formRef.validate((valid)=>{
        if (valid) {
          // 修改
          if (this.formData.dicId) {
            updateDictionary(this.formData).then((res)=>{
              if (res.code==1) {
                this.visable = false
                this.$emit('flushTable',{})
              }
            })

          } else {
            // 新增
            addDictionary(this.formData).then((res)=>{
              if (res.code==1) {
                this.visable = false
                this.$emit('flushTable',{})
              }
            })
          }
        }
      })
    },

  },
};
</script>
<style></style>
